<div class="form-group argument {{id % 2 ? 'odd' : 'even'}}">
	<!-- Label for argument with optional required icon -->
	<label for="{{argument.name}}">
		<b class="text-capitalize">{{argument.name}}</b> ({{parameterSchema.type}})
		<i *ngIf="parameterApi.required" class="fa fa-asterisk required m-0" title="This field is required."></i>
		<small class="form-text text-muted">{{ parameterApi.description }}</small>
	</label>

	<!-- Columns for allowing users to specify outputs of other action as arguments for this one -->
	<div class="row">
		<div class="col-4">
			<select name="playbookSelect" class="form-control" [(ngModel)]="argument.variant" (change)="clearValue()">
				<option *ngFor="let i of valueTypes" [ngValue]="i.id" [label]="i.name">{{i.name}}</option>
			</select>
		</div>
		<div class="col-8 d-flex align-items-center">
			<!-- Normal string text entries -->
			<input *ngIf="isStringSelect" class="form-control" name="{{argument.name}}" [(ngModel)]="argument.value"
				type="text" [attr.minlength]="parameterSchema.minLength > 0 ? parameterSchema.minLength : null"
				[attr.maxlength]="parameterSchema.maxLength > 0 ? parameterSchema.maxLength : null"
				[attr.pattern]="parameterSchema.pattern ? parameterSchema.pattern : null"
				[attr.required]="parameterApi.required" [attr.placeholder]="parameterApi.placeholder">

			<!-- Enum types, make a select box -->
			<select *ngIf="isEnumSelect" class="form-control" name="{{argument.name}}" [(ngModel)]="argument.value"
				[attr.required]="parameterApi.required">
				<option *ngIf="!parameterApi.required" value=""></option>
				<option *ngFor="let i of parameterSchema.enum" [value]="i" [label]="i">{{i}}</option>
			</select>

			<!-- For numbers enter number info -->
			<input *ngIf="isNumberSelect" class="form-control" name="{{argument.name}}" [(ngModel)]="argument.value"
				type="number" [attr.min]="getMin(parameterSchema)" [attr.max]="getMax(parameterSchema)"
				[attr.step]="parameterSchema.multipleOf > 0 ? parameterSchema.multipleOf : null"
				[attr.required]="parameterApi.required" [attr.placeholder]="parameterApi.placeholder">

			<!-- Checkbox for boolean values -->
			<div *ngIf="isBooleanSelect">
				<span class="switch">
					<input type="checkbox" class="switch" [name]="argument.name" [(ngModel)]="argument.value"
						[id]="argument.id">
					<label class="m-0" [for]="argument.id">{{ argument.value ? 'True' : 'False'}}</label>
				</span>
			</div>
			<!-- <input *ngIf="isBooleanSelect" type="checkbox" class="form-control" name="{{argument.name}}" [(ngModel)]="argument.value"> -->

			<!-- User select -->
			<select2 *ngIf="isStatic && isUserSelect" [data]="selectData" [value]="selectInitialValue"
				[options]="selectConfig" (valueChanged)="selectChange($event)"></select2>

			<!-- Role select -->
			<select2 *ngIf="isStatic && isRoleSelect" [data]="selectData" [value]="selectInitialValue"
				[options]="selectConfig" (valueChanged)="selectChange($event)"></select2>

			<!-- Global select -->
			<select *ngIf="isGlobalSelect" class="form-control" [(ngModel)]="argument.value"
				[disabled]="!globals?.length > 0">
				<option [ngValue]="''">
					<span *ngIf="!globals?.length > 0">
						None Created
					</span>
				</option>
				<option *ngFor="let i of globals" [ngValue]="i.id" [label]="i.name">{{i.name}}</option>
			</select>

			<!-- Branch Counter select -->
			<!-- <select *ngIf="isBranchCounterSelect" class="form-control" [(ngModel)]="argument.reference">
				<option [ngValue]="0"></option>
				<option *ngFor="let i of branchCounters" [ngValue]="i.id" [label]="i.text">{{i.text}}</option>
			</select> -->

			<!-- Action select -->
			<ng-container *ngIf="isActionSelect">
				<select class="form-control" [(ngModel)]="argument.value">
					<option [ngValue]="''"></option>
					<option *ngFor="let i of getPreviousActions()" [ngValue]="i.id" [label]="i.name">{{i.name}}</option>
				</select>
				<!-- <input type="text" class="form-control" [(ngModel)]="argument.selection" name="selection" placeholder="(Optional) Dot Notation selection into objects"> -->
			</ng-container>

			<!-- Action select -->
			<ng-container *ngIf="isVariableSelect">
				<div>
					<select class="form-control" [(ngModel)]="argument.value"
						[disabled]="!loadedWorkflow?.environment_variables?.length > 0">
						<option [ngValue]="''">
							<span *ngIf="!loadedWorkflow?.environment_variables?.length > 0">
								None Created
							</span>
						</option>
						<option *ngFor="let i of loadedWorkflow.environment_variables" [ngValue]="i.id"
							[label]="i.name">{{ i.name }}</option>
					</select>
				</div>
			</ng-container>

		</div>
	</div>
</div>

<div *ngIf="isStatic && (isNormalArray(parameterSchema) || parameterSchema.type === 'object')" class="mb-3">
	<json-editor #jsonEditor [options]="editorOptionsData" [data]="initialValue" (change)="updateValue($event)">
	</json-editor>
</div>

<div *ngIf="false && isStatic && isNormalArray(parameterSchema)" class="indent">
	<div class="row">
		<div class="col-6">
			<select class="form-control" [(ngModel)]="selectedType" name="selectedType">
				<option *ngFor="let i of availableTypes" [value]="i" [label]="i">{{i}}</option>
			</select>
		</div>
		<div class="col-6">
			<div class="form-group">
				<button class="btn btn-primary pull-right" (click)="addItem()" [disabled]="!selectedType">
					<i class="fa fa-plus"></i>Add Items
				</button>
			</div>
		</div>
	</div>

	<div class="form-group argument arrayItem {{itemId % 2 ? 'odd' : 'even'}}"
		*ngFor="let item of argument.value; let itemId = index; trackBy:trackArraysBy">
		<div class="row propertyHeader">
			<div class="col-6">
				<label>Item {{itemId+1}}:</label>
			</div>
			<div class="col-6">
				<div class="pull-right">
					<button *ngIf="itemId > 0" class="btn btn-primary" (click)="moveUp(itemId)" title="Move Up"><i
							class="fa fa-arrow-up"></i></button>
					<button *ngIf="itemId < argument.value.length - 1" class="btn ml-1 btn-primary"
						(click)="moveDown(itemId)" title="Move Down"><i class="fa fa-arrow-down"></i></button>
					<button class="btn ml-1 btn-danger" (click)="removeItem(itemId)" title="Remove Item"><i
							class="fa fa-close"></i></button>
				</div>
			</div>
		</div>

		<input *ngIf="arrayTypes[itemId] === 'string'" type="text" class="form-control"
			[(ngModel)]="argument.value[itemId]">
		<input *ngIf="arrayTypes[itemId] === 'number'" type="number" class="form-control"
			[(ngModel)]="argument.value[itemId]">
		<input *ngIf="arrayTypes[itemId] === 'boolean'" type="checkbox" class="form-control"
			[(ngModel)]="argument.value[itemId]">
	</div>
</div>

<div *ngIf="false && isStatic && parameterSchema.type === 'object'" class="indent">
	<div class="row">
		<div class="col-6">
			<input type="text" class="form-control" [(ngModel)]="propertyName" placeholder="Enter a parameter name">
		</div>
		<div class="col-3">
			<select class="form-control" [(ngModel)]="selectedType" name="selectedType">
				<option *ngFor="let i of availableTypes" [value]="i" [label]="i">{{i}}</option>
			</select>
		</div>
		<div class="col-3">
			<div class="form-group">
				<button class="btn btn-primary pull-right" (click)="addProperty()"
					[disabled]="!propertyName.trim() || !selectedType">
					<i class="fa fa-plus"></i>Add Property
				</button>
			</div>
		</div>
	</div>

	<div class="form-group argument {{itemId % 2 ? 'odd' : 'even'}}"
		*ngFor="let key of argument.value | keys; let itemId = index">
		<div class="row propertyHeader">
			<div class="col-6">
				<label>Property "{{key}}":</label>
			</div>
			<div class="col-6">
				<div class="pull-right">
					<button class="btn btn-danger" (click)="removeProperty(key)" title="Remove Item"><i
							class="fa fa-close"></i></button>
				</div>
			</div>
		</div>

		<input *ngIf="objectTypes[key] === 'string'" type="text" class="form-control" [(ngModel)]="argument.value[key]">
		<input *ngIf="objectTypes[key] === 'number'" type="number" class="form-control"
			[(ngModel)]="argument.value[key]">
		<input *ngIf="objectTypes[key] === 'boolean'" type="checkbox" class="form-control"
			[(ngModel)]="argument.value[key]">
	</div>
</div>